import {Component, ElementRef, ViewChild} from '@angular/core';
import * as echarts from 'echarts'

type EChartsOption = echarts.EChartsOption;
type ECharts = echarts.ECharts;

@Component({
  selector: 'app-data-analysis',
  templateUrl: './data-analysis.component.html',
  styleUrl: './data-analysis.component.scss'
})
export class DataAnalysisComponent {
  @ViewChild('echarts', {static: true}) echarts: ElementRef | undefined;
  chart: ECharts | undefined;
  option: EChartsOption = {};
  listener = () => {
    this.chart?.resize()
  }

  constructor() {
    const listener = window.addEventListener('resize', this.listener)
  }

  ngDestroy() {
    window.removeEventListener('resize', this.listener)
  }

  ngAfterViewInit() {
    this.chart = echarts.init(this.echarts?.nativeElement)
    const option: EChartsOption = {
      color: ['#5AE3EE', '#F7C846', '#73C5F2', '#7D74CD'],
      title: {
        // text: 'Gradient Stacked Area Chart'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        textStyle: {
          color: '#fff'
        },
        data: ['水电气', '新能源', '消纳', '碳排'],
        icon: 'rect',
        itemWidth: 15,
        itemHeight: 15,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: [3, 6, 9, 12, 15, 18, 21, 24],
          axisLabel: {
            color: '#fff',
            formatter: (value: string, index) => {
              return index === ((option.xAxis as any)[0].data.length - 1) ? value + 'h' : value
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            color: '#fff',
            formatter: (value) => {
              return value + 'kW'
            }
          }
        }
      ],
      series: [
        {
          //图表的名称。
          name: '水电气',
          //图表的类型，此处为'line'表示折线图。
          type: 'line',
          //是否将此系列的数据进行堆叠，'Total'表示堆叠总和。
          stack: 'Total',
          //折线是否平滑。
          smooth: true,
          //折线样式配置，包括宽度等。
          lineStyle: {
            width: 0
          },
          //是否显示数据点的符号。
          showSymbol: false,
          //区域样式配置，包括透明度和颜色等。其中颜色使用线性渐变填充。
          areaStyle: {
            opacity: 0.8,
            color: '#5AE3EE'
              /*new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#5AE3EE'
              },
              {
                offset: 1,
                color: '#5AE3EE'
              }
            ])*/
          },
          //高亮样式配置，此处设置关注系列。
          emphasis: {
            focus: 'series'
          },
          //图表的数据数组。
          data: [140, 232, 101, 264, 90, 340, 250,235]
        },
        {
          name: '新能源',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: '#F7C846'
              /*new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(0, 221, 255)'
              },
              {
                offset: 1,
                color: 'rgb(77, 119, 255)'
              }
            ])*/
          },
          emphasis: {
            focus: 'series'
          },
          data: [120, 282, 111, 234, 220, 340, 310,240]
        },
        {
          name: '消纳',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: '#73C5F2'
              /*new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(55, 162, 255)'
              },
              {
                offset: 1,
                color: 'rgb(116, 21, 219)'
              }
            ])*/
          },
          emphasis: {
            focus: 'series'
          },
          data: [320, 132, 201, 334, 190, 130, 220,300]
        },
        {
          name: '碳排',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: '#7D74CD'
              /*new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(255, 0, 135)'
              },
              {
                offset: 1,
                color: 'rgb(135, 0, 157)'
              }
            ])*/
          },
          emphasis: {
            focus: 'series'
          },
          data: [220, 402, 231, 134, 190, 230, 120,200]
        }
      ]
    };
    this.chart.setOption(option);
    this.option = option;
  }
}
